<template>
  <el-form
    size="small"
    :style="{ width: '94%', margin: '0 auto' }"
    v-bind="$attrs"
    :label-width="labelWidth"
    :model="model"
  >
    <el-row>
      <el-col
        v-for="(item, index) in formItems"
        :key="index"
        :span="item.span ?? 12"
        :offset="item.offset"
      >
        <el-form-item v-if="item.is === 'slot'" :name="item.name">
          <slot name="search" />
        </el-form-item>
        <el-form-item v-else :label="item.label" :prop="item.prop" :rules="item.rules">
          <component
            :is="item.is"
            v-bind="item.attrs"
            v-model="model[item.prop]"
            style="width: 100%"
          >
            <template v-if="item.is === 'el-select'">
              <el-option
                v-for="(itm, idx) in item.options"
                :label="itm.label"
                :value="itm.value"
                :key="idx"
              />
            </template>
          </component>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
type OptionsItem = {
  label: string
  value: string | number
  disabled?: boolean
}
type Model = {
  [key: string]: any
}
type FormItems = {
  label: string
  prop: string
  is: string
  attrs?: object
  options?: OptionsItem[]
  span?: number
  offset?: number
  [key: string]: any
}

interface IProps {
  model: Model
  formItems: FormItems[]
  labelWidth?: string | number
}
// const props = defineProps<IProps>()
const props = withDefaults(defineProps<IProps>(), {
  ref: 'baseForm',
  labelWidth: '100px',
})


</script>

<style scoped></style>
